<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-08-23 17:13:24
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/切换学科 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>切换年级/学科/版本</h3>
      </div>
      <p><a>*</a>本平台当前仅支持切换学校已开通学科</p>
      <div class="chose">
        <p>1.请切换至您所在的年级：</p>
        <div class="tab1 taps">
          <div
            class="classRadio"
            v-for="item in nianjiList"
            :key="item.id"
            @click="changeNianji(item.id)"
          >
            <div class="tips1 tips" v-if="radio3 != item.id"><span></span></div>
            <div class="tips2 tips" v-if="radio3 == item.id"><span></span></div>
            <p>{{ item.title }}</p>
          </div>
        </div>
        <p>2.请切换至您所教的学科：</p>
        <div class="tab1 taps">
          <div
            class="classRadio"
            v-for="item in classList"
            :key="item.id"
            @click="changeKemu(item.id)"
          >
            <div class="tips1 tips" v-if="radio1 != item.id"><span></span></div>
            <div class="tips2 tips" v-if="radio1 == item.id"><span></span></div>
            <p>{{ item.title }}</p>
          </div>
        </div>
        <p>3.请选择您所教学科的教学版本：</p>
        <div class="tab2 taps">
          <div
            class="classRadio"
            v-for="item in banbenList"
            :key="item.id"
            @click="radio2 = item.id"
          >
            <div class="tips1 tips" v-if="radio2 != item.id"><span></span></div>
            <div class="tips2 tips" v-if="radio2 == item.id"><span></span></div>
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
      <button @click="submit">保存并提交</button>
    </div>
  </div>
</template>

<script>
import {
  kemulists,
  versionslistsinfo,
  versionslists,
  nowkemu,
  setnowkemu,
  nianjilists
} from "../../../api/http";
export default {
  inject: ["reload"], //刷新页面
  name: "changeClass",
  components: {},
  data() {
    return {
      nianjiList:[],//年级列表
      classList: [], //学科列表
      banbenList: [], //版本列表
      radio1: "",//学科值
      radio2: "",//版本值
      radio3: "",//年级值
      nianji_id:'',//当前年级id

    };
  },
  created() {
    //获取年级列表
    nianjilists({
      md5key: localStorage.getItem("md5key"),
    }).then(res=>{
      console.log(res,"年纪列表")
      this.nianjiList = res.retRes
    })
    //获取当前科目和版本
    nowkemu({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "当前科目及版本");
      const data = res.data;
      if (res.retInt == 1) {
        this.radio1 = res.retRes.kemu_id;
        this.radio2 = res.retRes.kejianversions_id;
        this.nianji_id = res.retRes.nianji_id
        this.radio3 = res.retRes.nianji_id
        //获取科目列表
        kemulists().then((res) => {
          console.log(res, "科目列表");
          const data = res.retRes;
          if (res.retInt == 1) {
            this.classList = data;
          } else if (res.retInt != 1) {
            this.$notify.closeAll();
            this.$notify({
              message: res.retErr,
              duration: 2000,
              showClose: false,
            });
          }
        });
        //获取教学版本列表
        versionslists({
          kemu_id: this.radio1,
        }).then((res) => {
          console.log(res, "版本列表");
          const data = res.retRes;
          if (res.retInt == 1) {
            this.banbenList = data;
          } else if (res.retInt != 1) {
            this.$notify.closeAll();
            this.$notify({
              message: res.retErr,
              duration: 2000,
              showClose: false,
            });
          }
        });
      } else {
        this.$notify.closeAll();
        this.$notify({
          message: res.retErr,
          duration: 2000,
          showClose: false,
        });
      }
    });

    //获取教学版本列表含图书
    // versionslistsinfo({
    //   kemu_id: 2,
    // }).then((res) => {
    //   console.log(res, "版本列表含书本");
    //   const data = res.retRes;
    //   if (res.retInt == 1) {
    //     // this.banbenList = data;
    //   } else if (res.retInt != 1) {
    //     this.$notify.closeAll();
    //     this.$notify({
    //       message: res.retErr,
    //       duration: 2000,
    //       showClose: false,
    //     });
    //   }
    // });
  },
  methods: {
    //切换年级
    changeNianji(id){
      this.nianji_id = id
      this.radio3 = id
      console.log(this.nianji_id)
    },
    //切换科目后，版本会更新为选择的科目版本
    changeKemu(id) {
      this.radio1 = id;
      sessionStorage.setItem('kemu_id',id)
      this.radio2 = "";
      //获取教学版本列表
      versionslists({
        kemu_id: this.radio1,
      }).then((res) => {
        console.log(res, "版本列表");
        const data = res.retRes;
        if (res.retInt == 1) {
          this.banbenList = data;
        } else if (res.retInt != 1) {
          this.$notify.closeAll();
          this.$notify({
            message: res.retErr,
            duration: 2000,
            showClose: false,
          });
        }
      });
    },
    //提交设置的科目和版本
    submit() {
      console.log(this.radio1, this.radio2);
      if (!this.radio1) {
        this.$message({
          message: "请选择学科",
          duration: 1000,
          showClose: false,
        });
      } else if (!this.radio2) {
        this.$message({
          message: "请选择版本",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.radio3) {
        this.$message({
          message: "请选择年级",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      }else {
        setnowkemu({
          md5key: localStorage.getItem("md5key"),
          kemu_id: this.radio1,
          kejianversions_id: this.radio2,
          is_now: 1,
          nianji_id:this.nianji_id
        }).then((res) => {
          console.log(res, "设置科目版本");
          this.$notify.closeAll();
          this.$notify({
            message: "设置科目和版本成功",
            duration: 2000,
            showClose: false,
          });
          setTimeout(()=>{
            this.reload()
          },100)
          
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  .content {
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    p {
      margin-left: 40px;
      margin-bottom: 20px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      color: #969799;
      a {
        color: #f6444e;
      }
    }
    .chose {
      margin-left: 40px;
      cursor: pointer;
      p {
        margin: 20px 0;
        margin-bottom: 20px;
        color: #646566;
      }
      .taps {
        display: flex;
        flex-wrap: wrap;
        .classRadio {
          display: flex;
          margin-right: 79px;
          .tips {
            position: relative;
            top: 2px;
            margin-right: 8px;
            width: 14px;
            height: 14px;
            border: 1px solid #cccccc;
            border-radius: 100%;
            line-height: 12px;
            text-align: center;
            span {
              display: inline-block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
              width: 9px;
              height: 9px;
              background-color: #fff;
              border-radius: 100%;
            }
          }
          .tips2 {
            border: 1px solid #08a579;

            span {
              background-color: #08a579;
            }
          }
          p {
            margin: 0;
          }
        }
      }
      .tab2 {
        .classRadio {
          margin-bottom: 10px;
        }
      }
    }
    button {
      margin: 60px 0 0 390px;
      width: 120px;
      height: 40px;
      background: #08a579;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
      border: 0;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>